<!-- components/SearchInput.vue -->
<template>
  <div class="search-box-wrapper">
    <div class="search-box">
      <input
          type="text"
          v-model="keyword"
          placeholder="搜索兴趣内容..."
          @keyup.enter="handleSearch"
          @input="handleInput"
          @focus="showSuggestions = true"
          @blur="hideSuggestions"
      />
      <button @click="handleSearch">搜索</button>
    </div>

    <!-- 联想建议下拉框 -->
    <div class="suggestions-box" v-show="showSuggestions && keyword && suggestions.length > 0">
      <div
          v-for="(item, index) in suggestions"
          :key="'suggestion-'+index"
          class="suggestion-item"
          @click="selectSuggestion(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { searchService } from '@/api/search';

export default {
  data() {
    return {
      keyword: '',
      showSuggestions: false,
      suggestions: []
    }
  },
  methods: {
    async jumpToContentDetail(ctitle) {
      const ctid = await  axios.post('/api/content/selectCtidByCtitle',{ctitle});
      console.log(ctid);
      this.$router.push({
        path: '/content',
        query: {ctid}
      });
    },
    async handleSearch() {
      this.$emit('search', this.keyword);
      this.showSuggestions = false;
    },

    async handleInput() {
      if (this.keyword.trim()) {
        this.showSuggestions = true;
        this.fetchSuggestions();
      } else {
        this.showSuggestions = false;
        this.suggestions = [];
      }
    },

    async fetchSuggestions() {
      this.suggestions = await searchService.getSuggestions(this.keyword);
    },

    selectSuggestion(suggestion) {
      this.keyword = suggestion;
      this.showSuggestions = false;
      this.$emit('search', this.keyword);
    },

    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false;
      }, 200);
    }
  }
}
</script>

<style scoped>
.search-box-wrapper {
  position: relative;
  width: 600px;
  max-width: 90vw;
}

.search-box {
  display: flex;
  width: 100%;
  height: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  overflow: hidden;
  background: white;
}

.search-box input {
  flex: 1;
  padding: 0 20px;
  border: none;
  outline: none;
  font-size: 16px;
}

.search-box button {
  width: 100px;
  background-color: #2f80ed;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-box button:hover {
  background-color: #1a6fd8;
}

.suggestions-box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.suggestion-item:hover {
  background-color: #f5f7fa;
}

@media (max-width: 768px) {
  .search-box-wrapper {
    width: 500px;
  }

  .search-box {
    height: 46px;
  }

  .search-box input {
    padding: 0 18px;
    font-size: 15px;
  }

  .search-box button {
    width: 90px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .search-box-wrapper {
    width: 90%;
  }

  .search-box {
    height: 42px;
  }

  .search-box input {
    padding: 0 15px;
    font-size: 14px;
  }

  .search-box button {
    width: 80px;
    font-size: 14px;
  }
}
</style>